<!-- 付上网费：旅网/自网 -->
<template>
  <el-dialog 
    v-el-drag-dialog="{drag: true, full: false, resize: false}"
    :visible="true"
    :close-on-click-modal="false"
    @close="closeMd"
    :title="'付上网费'"
    width="1300px"
  >
    <el-tabs v-model="activeName" @tab-click="handleTabClick">
        <el-tab-pane label="旅网" name="lw-tab">
            <div ref="dgtools" class="filter-container">
                <div style="display: block;">
                    <el-form 
                        :model="fm1.ps" 
                        :ref="fm1.fname" 
                        :inline="true"
                    >
                        <el-form-item 
                            label="打款金额"
                            prop="payMoney"
                            :rules="[
                                { required: true, message: '请输入打款金额', trigger: 'blur' },
                                this.$rules.isFloat()
                            ]"
                        >
                            <el-input 
                                v-model.number="fm1.ps.payMoney" 
                                placeholder="打款金额"
                                style="width: 95px;"
                            ><span slot="suffix">元</span></el-input>
                        </el-form-item>

                        <el-form-item 
                            label="打款日期"
                            prop="payTime"
                            :rules="[
                                { required: true, message: '请选择打款日期', trigger: 'blur' }
                            ]"
                        >
                            <el-date-picker
                                v-model="fm1.ps.payTime"
                                type="date"
                                :value-format="'yyyy-MM-dd'"
                                placeholder="打款日期"
                                style="width: 125px;"
                            >
                            </el-date-picker>
                        </el-form-item>

                        <el-form-item
                            label="打款凭证"
                            prop="imgUrl"
                            :rules="[
                                { required: false, message: '请上传打款凭证图片', trigger: 'change'}
                            ]"
                        >
                            <UploadImg 
                                :imgName="'fm1'"
                                @getImgUrl="setImgUrl"
                                :url="'/company/upload'"
                                :ps="{ userName: uname }"
                                :src="fileBaseUrl+fm1.ps.imgUrl"
                                :tiptext="''"
                            />
                        </el-form-item>

                        <el-form-item 
                            label="付款备注"
                            prop="payNote" 
                        >
                            <el-input
                                type="textarea"
                                :autosize="{ minRows: 2, maxRows: 6 }"
                                placeholder="付款备注内容"
                                maxlength="1000"
                                show-word-limit
                                v-model="fm1.ps.payNote"
                                style="width: 550px;"
                            ></el-input>
                        </el-form-item>

                        <el-button type="primary" :icon="fm1.ps.updId ? 'el-icon-edit' : 'el-icon-plus'" :disabled="fm1.sb.load" @click="onSubmitLw">{{fm1.sb.text}}</el-button>
                    </el-form>
                </div>
            </div>

            <el-table
                :ref="dg1.tbName"
                :data="dg1.list"
                border fit
                :height="'400'"
                :max-height="'600'"
                :row-class-name="rowClassName"
                @header-dragend="dragHeaderSp"
                @selection-change="selRowChange"
                @select="selRow"
                @expand-change="saveRowExpand"
                style="width: 100%;"
            >
                <template slot="empty">未查询到车辆</template>

                <el-table-column fixed="left" type="selection" width="40"></el-table-column>
                <el-table-column
                    prop="plateNum"
                    label="车牌号"
                    :resizable="false"
                    width="90">
                </el-table-column>

                <el-table-column
                    prop="payMoney"
                    label="打款金额（元）"
                    :resizable="false"
                    width="105">
                    <template slot-scope="props">{{props.row.payMoney}}</template>
                </el-table-column>

                <el-table-column
                    prop="payTime"
                    label="打款日期"
                    :resizable="false"
                    width="90">
                    <template slot-scope="props">{{props.row.payTime}}</template>
                </el-table-column>

                <el-table-column
                    prop="imgUrl"
                    label="凭证图片"
                    width="90">
                    <template slot-scope="props">
                        <el-image 
                            style="width: 30px; height: 30px"
                            :src="props.row.imgUrl" 
                            :preview-src-list="[props.row.imgUrl]">
                        </el-image>
                    </template>
                </el-table-column>

                <el-table-column
                    prop="addTime"
                    label="添加时间"
                    :resizable="false"
                    width="135">
                    <template slot-scope="props">{{props.row.addTime}}</template>
                </el-table-column>

                <el-table-column
                    prop="payNote"
                    label="备注">
                    <template slot-scope="props">{{props.row.payNote}}</template>
                </el-table-column>

                <el-table-column
                    prop="oper"
                    label="操作">
                    <template slot-scope="props">
                        <el-button v-if="fm1.ps.updId == props.row.id" type="warning" @click="cancelEdit(1, props.row)">取消更新</el-button>

                        <template v-else>
                            <el-button type="primary" icon="el-icon-edit" circle @click="editObj(1, props.row)"></el-button>
                            <el-button type="danger" icon="el-icon-delete" circle @click="delObj(1, props.$index, props.row)"></el-button>
                        </template>
                    </template>
                </el-table-column>
            </el-table>
        </el-tab-pane>

        <el-tab-pane label="自网" name="zw-tab">
            <div ref="dgtools" class="filter-container">
                <div style="display: block;">
                    <el-form 
                        :model="fm2.ps" 
                        :ref="fm2.fname" 
                        :inline="true"
                    >
                        <el-form-item 
                            label="打款金额"
                            prop="payMoney"
                            :rules="[
                                { required: true, message: '请输入打款金额', trigger: 'blur' },
                                this.$rules.isFloat()
                            ]"
                        >
                            <el-input 
                                v-model.number="fm2.ps.payMoney" 
                                placeholder="打款金额"
                                style="width: 95px;"
                            ><span slot="suffix">元</span></el-input>
                        </el-form-item>

                        <el-form-item
                            label="打款人"
                            prop="payUname"
                            :rules="[
                                { required: true, message: '请选择打款业务员', trigger: 'change' },
                            ]"
                        >
                            <el-select
                                v-model="fm2.ps.payUname"
                                clearable
                                filterable
                                placeholder="打款业务员"
                                style="width: 120px;"
                            >
                                <el-option
                                    v-for="it in fm2.allSalesman"
                                    :key="it.baseUserId.uname"
                                    :label="it.baseUserId.realName"
                                    :value="it.baseUserId.uname"
                                >
                                    <span>{{ it.baseUserId.realName }}</span>
                                    <span>{{ it.baseUserId.phone }}</span>
                                </el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item 
                            label="打款日期"
                            prop="payTime"
                            :rules="[
                                { required: true, message: '请选择打款日期', trigger: 'blur' }
                            ]"
                        >
                            <el-date-picker
                                v-model="fm2.ps.payTime"
                                type="date"
                                :value-format="'yyyy-MM-dd'"
                                placeholder="打款日期"
                                style="width: 125px;"
                            >
                            </el-date-picker>
                        </el-form-item>

                        <el-form-item
                            label="打款凭证"
                            prop="imgUrl"
                            :rules="[
                                { required: false, message: '请上传打款凭证图片', trigger: 'change'}
                            ]"
                        >
                            <UploadImg
                                :imgName="'fm2'"
                                @getImgUrl="setImgUrl"
                                :url="'/company/upload'"
                                :ps="{ userName: uname }"
                                :src="fileBaseUrl+fm2.ps.imgUrl"
                                :tiptext="''"
                            />
                        </el-form-item>

                        <el-form-item 
                            label="付款备注"
                            prop="payNote" 
                        >
                            <el-input
                                type="textarea"
                                :autosize="{ minRows: 2, maxRows: 6 }"
                                placeholder="付款备注内容"
                                maxlength="1000"
                                show-word-limit
                                v-model="fm2.ps.payNote"
                                style="width: 350px;"
                            ></el-input>
                        </el-form-item>

                        <el-button type="primary" icon="el-icon-plus" :disabled="fm2.sb.load" @click="onSubmitZw">{{fm2.sb.text}}</el-button>
                    </el-form>
                </div>
            </div>

            <el-table
                :ref="dg2.tbName"
                :data="dg2.list"
                border fit
                :height="'400'"
                :max-height="'600'"
                :row-class-name="rowClassName"
                @header-dragend="dragHeaderSp"
                @selection-change="selRowChange"
                @select="selRow"
                @expand-change="saveRowExpand"
                style="width: 100%;"
            >
                <template slot="empty">未查询到车辆</template>

                <el-table-column fixed="left" type="selection" width="40"></el-table-column>
                <el-table-column
                    prop="plateNum"
                    label="车牌号"
                    :resizable="false"
                    width="90">
                </el-table-column>

                <el-table-column
                    prop="payMoney"
                    label="打款金额（元）"
                    :resizable="false"
                    width="105">
                    <template slot-scope="props">{{props.row.payMoney}}</template>
                </el-table-column>

                <el-table-column
                    prop="payTime"
                    label="打款日期"
                    :resizable="false"
                    width="90">
                    <template slot-scope="props">{{props.row.payTime}}</template>
                </el-table-column>

                <el-table-column
                    prop="imgUrl"
                    label="凭证图片"
                    width="90">
                    <template slot-scope="props">
                        <el-image 
                            style="width: 30px; height: 30px"
                            :src="props.row.imgUrl" 
                            :preview-src-list="[props.row.imgUrl]">
                        </el-image>
                    </template>
                </el-table-column>

                <el-table-column
                    prop="addTime"
                    label="添加时间"
                    :resizable="false"
                    width="135">
                    <template slot-scope="props">{{props.row.addTime}}</template>
                </el-table-column>

                <el-table-column
                    prop="payNote"
                    label="备注">
                    <template slot-scope="props">{{props.row.payNote}}</template>
                </el-table-column>

                <el-table-column
                    prop="oper"
                    label="操作">
                    <template slot-scope="props">
                        <el-button v-if="fm2.ps.updId == props.row.id" type="warning" @click="cancelEdit(2, props.row)">取消更新</el-button>

                        <template v-else>
                            <el-button type="primary" icon="el-icon-edit" circle @click="editObj(2, props.row)"></el-button>
                            <el-button type="danger" icon="el-icon-delete" circle @click="delObj(2, props.$index, props.row)"></el-button>
                        </template>
                    </template>
                </el-table-column>
            </el-table>
        </el-tab-pane>
    </el-tabs>
 </el-dialog>
</template>

<script>
import { mapGetters } from "vuex";
import DataGridBase from '@/views/mixins/DataGridBase';
import elDragDialog from '@/directive/el-drag-dialog';
import UploadImg from "@/components/UploadImg";

import * as orderService from '@/api/services/order.service';
import * as commonService from '@/api/services/common.service';

export default {
  name: 'PayInternetFee',
  mixins: [ DataGridBase ],
  directives: { elDragDialog },
  components: { UploadImg },
  props: { myData: Object },
  computed: {
    ...mapGetters(["uname"]),
  },
  data() {
    // 订单对象
    let order = this.myData.order;

    return {
        // 文件地址前缀
        fileBaseUrl: this.C.fileBaseUrl,
        // 当前tab选中key
        activeName: 'lw-tab',
        fm1: {
            fname: 'lwFm',
            sb: { load: false, text: '确定添加' },
            ps: {
                // 修改id
                updId: '',      
                // 订单编号 
                orderNum: order.orderNum,   
                // 打款金额 
                payMoney: '',
                // 打款备注
                payNote: '',
                // 打款时间 eg:2020-10-14
                payTime: '',
                // 上网费类型 eg:ZWSWF 自网 LWSWF 旅网
                payType: 'LWSWF',
                // 图片url
                imgUrl: '',
            }
        },
        dg1: {
            tbName: 'lwTb',
            // 所选行数组
            selRows: [], 
            list: [
                {
                    id: 1, 
                    orderNum: 'O12346',
                    payType: 'LWSWF',
                    plateNum: '川A12345', 
                    payUname: '',
                    payMoney: 100, 
                    payTime: '2021-05-05 10:30', 
                    imgUrl: 'https://qfc120.com/qfcimgs/1.gif',
                    addTime: '2021-05-05 10:30',
                    payNote: '打款备注'
                },
                {
                    id: 2, 
                    orderNum: 'O12346',
                    payType: 'LWSWF',
                    plateNum: '川A67890', 
                    payUname: '',
                    payMoney: 200, 
                    payTime: '2021-05-05 10:30', 
                    imgUrl: 'https://qfc120.com/qfcimgs/2.gif',
                    addTime: '2021-05-05 10:30',
                    payNote: '打款备注'
                },
            ],
            ps: { // 过滤参数
                page: 1, row: 100,
                // 订单号
                orderNum: order.orderNum,
                // 上网费类型 eg:ZWSWF 自网 LWSWF 旅网
                jzType: 'LWSWF',
            }
        },
        fm2: {
            fname: 'zwFm',
            sb: { load: false, text: '确定添加' },
            ps: {
                // 修改id
                updId: '',    
                // 订单编号 
                orderNum: order.orderNum,
                // 打款金额 
                payMoney: '',
                // 打款备注
                payNote: '',
                // 打款时间 eg:2020-10-14
                payTime: '',
                // 打款人uname
                payUname: '',
                // 上网费类型 eg:ZWSWF 自网 LWSWF 旅网
                payType: 'ZWSWF',
                // 图片url
                imgUrl: '',
            },
            // 打款人列表
            allSalesman: []
        },
        dg2: {
            tbName: 'zwTb',
            // 所选行数组
            selRows: [], 
            list: [
                {
                    id: 1, 
                    orderNum: 'O12345',
                    plateNum: '川A12345', 
                    payType: 'ZWSWF',
                    payUname: 'U1598762669542',
                    payMoney: 100, 
                    payTime: '2021-05-05 10:30', 
                    imgUrl: 'https://qfc120.com/qfcimgs/1.gif',
                    addTime: '2021-05-05 10:30',
                    payNote: '打款备注'
                },
                {
                    id: 2, 
                    orderNum: 'O12345',
                    plateNum: '川A67890', 
                    payType: 'ZWSWF',
                    payUname: 'U1598762669542',
                    payMoney: 200, 
                    payTime: '2021-05-05 10:30', 
                    imgUrl: 'https://qfc120.com/qfcimgs/2.gif',
                    addTime: '2021-05-05 10:30',
                    payNote: '打款备注'
                },
            ],
            ps: { // 过滤参数
                page: 1, row: 100,
                // 订单号
                orderNum: order.orderNum,
                // 上网费类型 eg:ZWSWF 自网 LWSWF 旅网
                jzType: 'ZWSWF',
            }
        }
        
    }
  },
  created(){
    const that = this;
    
    // that.getLwDgList();
    // that.getZwDgList();

    that.getServiceManList();
  },
  methods:{
    closeMd(){ // 关闭弹框
        this.$emit('myClick', false);
    },
    // 点击tab事件
    handleTabClick(tab, event) {
        
    },
    /**
     * 设置-图片url
     * @param e 上传成功后的服务器图片url
     */
    setImgUrl(e) {
      this[e.name].ps.imgUrl = e.url;
    },
    /**
     * 获取-单位所有业务员
     */
    getServiceManList() {
      const that = this;

      let loading = that.U.qloading("数据请求中...");
      commonService.getServiceManList({ staffState: "NORMAL,TRY" }).then((res) => {
        that.fm2.allSalesman = res.data;

        that.U.qclose(loading);
      });
    },
    // 获取-旅网上网费-列表数据
    getLwDgList(){
        const that = this;

        let loading = that.U.qloading('数据请求中...');
        orderService.getInternetFeeList(that.dg1.ps).then(res => {
            that.U.qclose(loading);

            if(!res){
                that.U.qerror('数据请求失败');
            }else if(res.code != 1){
                that.dg1.list = [];
            }else{
                that.dg1.list = res.data;
            }
        }).catch(() => {
            that.U.qclose(loading);
        });
    },
    // 添加/修改-旅网上网费
    onSubmitLw(){
        const that = this, ps = that.fm1.ps;
        
        that.$refs[that.fm1.fname].validate((valid) => {
            if (!valid) {
                return false; 
            }else{
                that.fm1.sb.load = true;
                let loading = that.U.qloading('提交中，请稍后...');
                
                orderService.adupInternetFee(ps).then(res => {
                    that.fm1.sb.load = false;
                    that.U.qclose(loading);
                    
                    if(!res || res.code != 1){
                        that.U.qerror(res.msg);
                    }else {
                        that.U.qsuccess(res.msg);

                        // 调用父组件方法-重新加载数据
                        that.getLwDgList();

                        // 清空付款日期
                        that.fm1.ps.payTime = '';
                    }
                });
            }
       });
    },
    /**
     * 编辑-旅网上网费
     * @param t 所属类型 1-旅网 2-自网
     * @param o 操作的数据对象
     */
    editObj(t, o){
        const that = this;

        that['fm'+t].ps = {
            // 修改id
            updId: o.id,      
            // 订单编号 
            orderNum: o.orderNum,
            // 打款人
            payUname: o.payUname,   
            // 打款金额 
            payMoney: o.payMoney,
            // 打款备注
            payNote: o.payNote,
            // 打款时间 eg:2020-10-14
            payTime: o.payTime,
            // 上网费类型 eg:ZWSWF 自网 LWSWF 旅网
            payType: o.payType,
            // 图片url
            imgUrl: o.imgUrl,
        };

        that['fm'+t].sb.text = '立即更新';
    },
    /**
     * 取消编辑-旅网上网费
     * @param t 所属类型 1-旅网 2-自网
     * @param o 操作的数据对象
     */
    cancelEdit(t, o){
        const that = this;

        that['fm'+t].ps = {
            // 修改id
            updId: '',      
            // 订单编号 
            orderNum: o.orderNum,   
            // 打款人
            payUname: '',   
            // 打款金额 
            payMoney: '',
            // 打款备注
            payNote: '',
            // 打款时间 eg:2020-10-14
            payTime: '',
            // 上网费类型 eg:ZWSWF 自网 LWSWF 旅网
            payType: o.payType,
            // 图片url
            imgUrl: '',
        };

        that['fm'+t].sb.text = '确定添加';
    },
    /**
     * 删除-旅网上网费
     * @param t 所属类型 1-旅网 2-自网
     * @param i 列表下标
     * @param o 操作的数据对象
     */
    delObj(t, i, o){
        const that = this;

        that.U.qconfim(`确定<span class="c-red">删除</span>所选上网费记录？`).then(r => {
            if(r){
                let loading = that.U.qloading('删除中，请稍后...');
                let ps = {delIds: o.id};
                orderService.delInternetFee(ps).then(res => {
                    that.U.qclose(loading);
                    
                    if(!res || res.code != 1){
                        that.U.qerror(res.msg);
                    }else {
                        that.U.qsuccess(res.msg);

                        // 重新加载数据
                        t == 1 ? that.getLwDgList() : that.getZwDgList();
                    }
                });
            }
        });
    },


    // 获取-自网上网费-列表数据
    getZwDgList(){
        const that = this;

        let loading = that.U.qloading('数据请求中...');
        orderService.getInternetFeeList(that.dg2.ps).then(res => {
            that.U.qclose(loading);

            if(!res){
                that.U.qerror('数据请求失败');
            }else if(res.code != 1){
                that.dg2.list = [];
            }else{
                that.dg2.list = res.data;
            }
        }).catch(() => {that.U.qclose(loading);});
    },
    // 添加/修改-自网上网费
    onSubmitZw(){
        const that = this, ps = that.fm2.ps;
        
        that.$refs[that.fm2.fname].validate((valid) => {
            if (!valid) {
                return false; 
            }else{
                that.fm2.sb.load = true;
                let loading = that.U.qloading('提交中，请稍后...');
                
                orderService.adupInternetFee(ps).then(res => {
                    that.fm2.sb.load = false;
                    that.U.qclose(loading);
                    
                    if(!res || res.code != 1){
                        that.U.qerror(res.msg);
                    }else {
                        that.U.qsuccess(res.msg);

                        // 调用父组件方法-重新加载数据
                        that.getZwDgList();

                        // 清空付款日期
                        that.fm2.ps.payTime = '';
                    }
                });
            }
       });
    },

  }

 }
</script>